<template>
	<view>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="my-music-instrument" gettree>
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<view class="flex text-xs" v-for="(item,index) in data" :key="index">
					<view class="flex justify-center items-center datas rounded checked p-1 mb-1 h-2 w-10">{{item.name}}
					</view>
					<view class="flex ml-3">
						<view v-for="(child,indexs) in item.children" :key="indexs"
							:class="checkArray.includes(child._id)?'checked':''" @click="click(child._id)"
							class="datas flex rounded justify-center items-center p-1 mb-1 mr-2 h-2">
							{{child.name}}
						</view>
					</view>

				</view>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkArray: ["61f65b4b3ee9ba0001722bed"]
			}
		},
		computed: {
			instrument_ids() {
				this.$emit('instrument_ids', instrument_ids)
			}
		},
		methods: {
			click(e) {
				console.log(e)
				const findRes = this.checkArray.findIndex((item) => e == item)
				findRes >= 0 ? this.checkArray.splice(findRes, 1) : this.checkArray.push(e)
			}
		}
	}
</script>

<style>
	.datas {
		background-color: #CCCCCC;
		color: white;
		border: 1px solid #FFFFFF;
	}

	.datas:hover {
		background-color: #bbbbbb;
	}

	.checked {
		background-color: #99dd00;
		border: 1px solid #99cc33;
	}

	.checked:hover {
		background-color: #99dd00;
	}
</style>
